<template>
  <div>
    <h2 :class="['tac']">欢迎光临_vue开发的收银系统</h2>
    <table :class="['tac']">
      <tr>
        <th><div>苹果 {{price}}￥/斤,折扣 {{zhe}}折</div></th>
      </tr>
      <tr>
        <td>
          <div>请输入你要购买的斤数<input v-model="jin" type="text" /></div>
        </td>
      </tr>
      <tr>
        <td><button @click="check">结账买单~</button></td>
      </tr>
      <tr>
        <td>
          <div>
            结账单:总价{{ sum }}￥元 折后价:{{ zhehou }}￥元 省了:{{ sheng }}￥元
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price:10,
      zhe:8,
      jin: 1,
      sum: 10,
      zhehou: 8,
      sheng: 2,
    };
  },

  methods: {
    check() {
      (this.sum = this.price * +this.jin),
        (this.zhehou = this.zhe * +this.jin),
        (this.sheng = this.sum- this.zhehou);
    },
  },
};
</script>

<style scoped>
.tac {
  text-align: center;
}
table {
  margin: 0 auto;
  width: 100%;
  height: 200px;
  border: 1px solid #000;
}
table th,
table td {
  border: 1px solid #000;
}
</style>
